<template>
	<div class="tab-front" v-loading="loading[0]" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#fff">
		<el-tabs v-model="activeName">
			<el-tab-pane label="会计科目" name="section-1">
				<section-1/>
			</el-tab-pane>
			<el-tab-pane label="部门" name="section-2">
				<section-2/>
			</el-tab-pane>
			<el-tab-pane label="职员" name="section-3">
				<section-3/>
			</el-tab-pane>
			<el-tab-pane label="金额" name="section-4">
				<section-4/>
			</el-tab-pane>
			<el-tab-pane label="审批步骤" name="section-5">
				<section-5/>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import section1 from './section1'
import section2 from './section2'
import section3 from './section3'
import section4 from './section4'
import section5 from './section5'
export default {
	components: {
		'section-1': section1,
		'section-2': section2,
		'section-3': section3,
		'section-4': section4,
		'section-5': section5,
	},
	data() {
		return {
			activeName: 'section-1',
			loading: this.$store.state.verifyProcessStore.loading
		}
	},
	watch: {
		activeName(newVal) {
			this.$store.commit('verifyProcessStore/updateStatus', newVal.split('-')[1]);
			this.$store.commit('verifyProcessStore/updateTableData', []);
			this.$store.commit('verifyProcessStore/updateIsAdd', false);
		}
	},
	created() {
		this.$store.dispatch('verifyProcessStore/getTreeData');
	}
}
</script>